<template>
  <view class="content">
    <view class="bg">
      <view style="position: absolute; top: 300rpx"> </view>
    </view>
    <view class="Login">
      <view class="logo">
        <view style="width: 160rpx; height: 100%">
          <image :src="logo" mode="scaleToFill" />
        </view>
      </view>
      <!-- 表单 -->
      <view class="form">
        <uni-forms
          :rules="rules"
          style="width: 100%"
          :model="registerForm"
          ref="formRef"
        >
          <uni-forms-item name="username">
            <view class="account_view">
              <view class="input_item">
                <input
                  v-model="registerForm.username"
                  placeholder="请输入学号/工号"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="email">
            <view class="account_view">
              <view class="input_item">
                <input
                  v-model="registerForm.email"
                  placeholder="请输入邮箱"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="code">
            <view class="account_view T">
              <view class="input_item">
                <input
                  v-model="registerForm.code"
                  placeholder="请输入验证码"
                  placeholder-class="input-placeholder"
                />
              </view>
              <view v-if="Wait" @tap="getCode" class="getCode">获取验证码</view>
              <view v-else @tap="getCode" class="getCode">{{ second }}s</view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="password">
            <view class="account_view">
              <view class="input_item">
                <input
                  type="password"
                  v-model="registerForm.password"
                  placeholder="请输入密码"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </uni-forms-item>
          <uni-forms-item name="checkPassword">
            <view class="account_view">
              <view class="input_item">
                <input
                  type="password"
                  v-model="registerForm.checkPassword"
                  placeholder="请确认密码"
                  placeholder-class="input-placeholder"
                />
              </view>
            </view>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="button">
        <button class="B" @tap="submit">确认修改</button>
        <view style="display: flex; justify-content: center; margin-top: 15rpx">
          <span @tap="Back">返回登录</span>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { sendCode, ForgetPassword } from "../../utils/general";
const logo = ref("http://smzacc0p8.hn-bkt.clouddn.com/logo.png");
const second = ref(60);
const Wait = ref(true);
//表单数据
const registerForm = ref({
  username: "",
  email: "",
  code: "",
  password: "",
  checkPassword: "",
});
const formRef = ref();
const rules = {
  username: {
    rules: [
      { required: true, errorMessage: "请输入账号" },
      {
        minLength: 0,
        maxLength: 20,
        errorMessage: "账号不超过20个字符",
      },
    ],
  },
  email: {
    rules: [
      { required: true, errorMessage: "请输入邮箱" },
      { max: 20, errorMessage: "邮箱长度为11" },
    ],
  },
  code: {
    rules: [
      { required: true, errorMessage: "请输入验证码" },
      { max: 20, errorMessage: "验证码长度为11" },
    ],
  },
  password: {
    rules: [{ required: true, errorMessage: "请输入密码" }],
  },
  checkPassword: {
    rules: [{ required: true, errorMessage: "请确认密码" }],
  },
};
//获取验证码
const getCode = async () => {
  if (!registerForm.value.email) {
    return uni.showToast({
      title: "请输入邮箱",
      icon: "none",
    });
  }
  const res = await sendCode(registerForm.value.email);
  if (res?.data?.code == 200) {
    showTime();
  }
};
//倒计时
const showTime = async () => {
  Wait.value = false;
  const time = setInterval(() => {
    second.value--;
    if (second.value == 0) {
      second.value = 60;
      Wait.value = true;
      clearInterval(time);
    }
  }, 1000);
};
//提交注册信息
const submit = async () => {
  try {
    await formRef?.value?.submit();
    if (registerForm.value.password !== registerForm.value.checkPassword) {
      return uni.showToast({
        title: "两次密码不一致",
        icon: "error",
      });
    }
    const res = await ForgetPassword(registerForm.value);
    console.log(res);

    if (res?.data?.code !== 200) {
      return uni.showModal({
        title: "提示",
        content: res?.data?.message,
        showCancel: false, // 不显示取消按钮
        confirmText: "知道了", // 确定按钮的文本
      });
    } else {
      uni.showToast({
        title: "修改成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateTo({
          url: "/pageA/login/login",
        });
      }, 500);
    }
  } catch (error) {
    console.log(error);
  }
};
//返回登录界面
const Back = () => {
  uni.navigateBack();
};
</script>

<style  lang="scss">
image {
  height: 100%;
  width: 100%;
}
.content {
  background-color: #fff;
  width: 100%;
  height: 100vh;
  position: relative;
  .bg {
    width: 100%;
    height: 30vh;
    background: linear-gradient(to bottom, #f8f8f8, #edf6e3, #cff2a2);
    z-index: 1;
    .title {
      bottom: 30px;
      font-weight: bold;
      font-size: 40rpx;
      padding: 10rpx 20rpx;
    }
  }
  .Login {
    box-sizing: border-box;
    width: 100%;
    height: 70vh;
    background-color: #fff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    margin-top: -30rpx;
    display: flex;
    flex-direction: column;
    padding: 0 60rpx;
    // grid-template-rows: 160rpx 300rpx 180rpx 180rpx;
    .logo {
      height: 160rpx;
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .form {
      width: 100%;
      margin-bottom: 20rpx;
      // height: 300rpx;
    }
    .T {
      display: flex;
    }
    .input_item {
      height: 70rpx;
      border-bottom: #ccc 2rpx solid;
      .input-placeholder {
        color: #ccc;
        font-size: 28rpx;
      }
      input {
        height: 100%;
        font-size: 32rpx;
      }
    }
    .account_view {
      width: 100%;
      // height: 150rpx;
      .getCode {
        background-color: #b8d587;
        text-align: center;
        height: 70rpx;
        width: 160rpx;
        line-height: 70rpx;
        color: #fff;
        font-weight: bold;
        border-radius: 10rpx;
        padding: 0 20rpx;
        margin-left: 20rpx;
      }
    }
    .button {
      width: 100%;
      height: 150rpx;
      .B {
        background-color: #b8d587;
        color: #fff;
      }
    }
    .wx-logo {
      margin-top: 30rpx;
      height: 100rpx;
      width: 100%;
      display: flex;
      justify-content: center;
    }
  }
}
.uni-forms-item {
  margin-bottom: 18rpx !important;
  margin-top: 5rpx;
}
</style>
